<template>
  <div>
    <sect></sect>
    <div class="aaa">
      <van-tabs>
        <van-tab v-for="index in 8" :title="tile[index - 1]" :key="index">
          <div class="subject">
            <div class="subject_left" id="subject_left1">
              <div class="subject_left_1">
                <img @click="but" src="../assets/01.webp" />
                <p class="nr">{{ nr }}</p>
                <div class="sub_1">
                  <p class="sub_1_1">
                    <img
                      src="../assets/01.webp"
                      style="width: 20px; height: 20px; border-radius: 50%"
                      alt=""
                    />
                    &nbsp;&nbsp;
                    <span>{{ usme }}</span>
                  </p>
                  <p class="sub_1_1">
                    <van-icon name="like-o" style="font-size: 18px" />
                    <span>123213</span>
                  </p>
                </div>
              </div>
            </div>

            <div class="subject_right">
              <div class="subject_right_1">
                <img @click="but" src="../assets/01.webp" />
                <p class="nr">{{ nr }}</p>
                <div class="sub_1">
                  <p class="sub_1_1">
                    <img
                      src="../assets/01.webp"
                      style="width: 20px; height: 20px; border-radius: 50%"
                      alt=""
                    />
                    &nbsp;&nbsp;
                    <span>{{ usme }}</span>
                  </p>
                  <p class="sub_1_1">
                    <van-icon name="like-o" style="font-size: 18px" />
                    <span>123213</span>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import sect from "../components/Sectorization.vue";

export default {
  data() {
    return {
      nr: "事实上是时候是是",
      usme: "千万人",
      tile: [
        "动漫",
        "小说",
        "直播",
        "美食",
        "游戏",
        "读书",
        "健身",
        "旅行",
        "绘画",
        "护肤",
        "影视",
      ],
    };
  },
  components: {
    sect,
  },
  methods: {
    but() {
      console.log(1223);
      this.$router.push("/Node_index");
    },
  },
};
</script>

<style scoped>
.subject_left_1 {
  padding: 5px;
  /* background: firebrick; */
}
.nr {
  margin: 0 10px;
  font-size: 14px;
  margin-top: 0px;
  /* background: #f65c5c; */
  width: 165px;
  text-align: left;
  margin-top: -10px;
  padding: 0;
  line-height: 20px;
}

.aaa {
  margin-left: -111px;
  width: 400px;
}
/* 主体内容 */
.subject {
  height: 2000px;
  margin-top: 10px;
  padding-bottom: 50px;
  overflow: hidden;
}
/* 主体内容左 */
.subject_left {
  width: 186px;
  float: left;
  overflow: hidden;
  padding-left: 5px;
  /* background-color: aquamarine; */
}
.sub_1_1 {
  display: flex;
  align-items: center;
  margin-top: 5px;
}

.sub_1 {
  display: flex;
  justify-content: space-between;
  color: black;
  font-size: 2px;
  margin-left: 10px;
}

.subject_right img {
  width: 190px;
  /* height: 320px; */
  margin-bottom: 4px;
}
.subject_left img {
  width: 190px;
  /* height: 320px; */
  margin-bottom: 4px;
}
/* 主体内容右 */
.subject_right {
  width: 190px;
  /* height: 1800px; */
  float: right;
  margin-top: 5px;
  padding-right: 12px;
  /* box-sizing: border-box; */
  /* background-color: rgb(122, 122, 122); */
}
</style>